<template>
  <a-modal
    :visible="formVisible"
    title="数据源管理"
    :width="1200"
    @cancel="close"
    @ok="close"
  >
    <a-row>
      <a-space>
        <a-button type="primary" @click="add">
          <template #icon><icon-plus /></template>
          新增
        </a-button>
        <a-button @click="refresh">
          <template #icon><icon-refresh /></template>
          刷新
        </a-button>
      </a-space>
    </a-row>
    <a-divider />
    <a-table
      row-key="id"
      :loading="loading"
      :data="renderData"
      :columns="columns"
      :bordered="{ wrapper: true, cell: true }"
    >
      <template #operations="{ record }">
        <a-space>
          <a-button size="small" type="text" @click="edit(record)">
            <template #icon>
              <icon-edit />
            </template>
            编辑
          </a-button>
          <a-popconfirm
            content="此操作将永久删除该数据源, 是否继续?"
            type="danger"
            @ok="del(record.id)"
          >
            <a-button
              v-permission="authority.SYS_LOG_DEL"
              size="small"
              type="text"
              status="danger"
            >
              <template #icon>
                <icon-delete />
              </template>
              删除
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
  </a-modal>
  <ds-form
    v-model:visible="dsDialogFormVisible"
    :form-data="formData"
    @refresh="refresh"
  />
</template>

<script setup lang="ts">
  import { Message } from '@arco-design/web-vue';
  import { computed, ref } from 'vue';
  import { useRequest } from 'vue-request';
  import { datasourceList, deleteDs } from '@/api/upms/gen';
  import { useVisible } from '@/hooks/visible';
  import authority from '@/utils/authority';

  import DsForm from './ds-form.vue';

  const columns = [
    { title: '数据源名称', dataIndex: 'name' },
    { title: 'url', dataIndex: 'url', ellipsis: true },
    { title: '用户名 ', dataIndex: 'username' },
    { title: '密码', dataIndex: 'password' },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '操作', slotName: 'operations' },
  ];

  const { data, loading, refresh } = useRequest(datasourceList);

  const renderData = computed(() => data.value || []);

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });

  const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void;
  }>();

  const formData = ref({});

  const { formVisible, close } = useVisible(props, emit);

  const dsDialogFormVisible = ref(false);

  const add = () => {
    dsDialogFormVisible.value = true;
    formData.value = {};
  };
  const edit = (e: any) => {
    dsDialogFormVisible.value = true;
    formData.value = { ...e };
  };
  const del = async (id: string) => {
    await deleteDs(id).then(() => {
      Message.success('删除成功');
      refresh();
    });
  };
</script>

<style lang="less" scoped>
  .choose-area {
    display: flex;
    flex-wrap: wrap;
    > div {
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      line-height: 1;

      &:hover {
        background: rgba(0, 0, 0, 0.13);
      }
    }

    overflow-y: auto;
  }

  .icon-show {
    > :deep(svg) {
      width: 40px;
      height: 40px;
    }
  }
</style>
